import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import type { InfoOptions } from './index'
import styles from './toast.module.less'

interface ToastState {
  messages: string;
  duration?: number;
}

export type NewInstanceType = { destroy: () => void }

class Toast extends Component<any, ToastState> {
  constructor(props) {
    super(props)
    this.state = {
      messages: '',
      ...this.props,
    }
  }

  static newInstance: { (opts: InfoOptions): NewInstanceType }

  render() {
    return (
      <div className={styles.container}>
        <div className={styles.msg}>{this.state.messages}</div>
      </div>
    )
  }
}

Toast.newInstance = (opts) => {
  const div = document.createElement('div')
  document.body.append(div)
  ReactDOM.render(React.createElement(Toast, opts), div)
  return {
    destroy() {
      ReactDOM.unmountComponentAtNode(div)
      document.body.removeChild(div)
    },
  }
}
export default Toast
